<template>
    <el-dialog v-model="dialogVisible" title="供应商管理" width="30%" style="min-width: 800px;" draggable>

        <div>
            <span class="dialog-label">尚欠供应商款：</span>
            <span style="color:red;font-weight: bold;">
                {{ "￥" }}{{ requestParam.supplier.due }}
            </span>
        </div>

        <div style="height: 20px;"></div>

        <div>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="box-2">
                        <span style="font-weight: bold;">供应商：</span>
                        <span>
                            {{ requestParam.supplier.name }}
                        </span>
                    </div>
                </el-col>

                <!-- 仓库名称 -->
                <el-col :span="6">
                    <div class="box-2">
                        <span style="font-weight: bold;">仓库：</span>
                        <span>
                            {{ requestParam.warehouse.name }}
                        </span>
                    </div>
                </el-col>

                <!-- 实付金额 -->
                <el-col :span="6">
                    <div class="box-2">
                        <span style="font-weight: bold;">实付金额：</span>
                        <span>
                            {{ "￥" }}{{ requestParam.actualAmount }}
                        </span>
                    </div>
                </el-col>

                <!-- 日期 -->
                <el-col :span="6">
                    <div class="box-2">
                        <span style="font-weight: bold;">日期：</span>
                        <span>
                            {{ $kt.date.format(requestParam.gmtCreate, "yyyy-MM-dd") }}
                        </span>
                    </div>
                </el-col>

                <!-- 备注 -->
                <el-col :span="24">
                    <div class="box-2">
                        <span style="font-weight: bold;">备注：</span>
                        <span>
                            {{ requestParam.remark }}
                        </span>
                    </div>
                </el-col>

            </el-row>
        </div>

        <div style="height: 20px;"></div>

        <el-table border :data="requestParam.inList">

            <el-table-column prop="goods.name" label="商品" width="180">
            </el-table-column>

            <!-- 货号 -->
            <el-table-column prop="goods.numberStr" label="货号" width="180">
            </el-table-column>

            <!-- 条码 -->
            <el-table-column prop="goods.barCode" label="条码" width="180">
            </el-table-column>

            <!-- 数量 -->
            <el-table-column prop="number" label="数量" width="180">
            </el-table-column>

            <!-- 采购价 -->
            <el-table-column prop="goods.purchasePrice" label="采购价" width="180">
            </el-table-column>

            <!-- 折扣 -->
            <el-table-column prop="discount" label="折扣" width="180">
                <template #default="{ row }">
                    <!-- {{ row.discount * 100 }}{{ "%" }} -->
                    {{ $kt.decimal.mul(row.discount, 100) }}{{ "%" }}
                </template>

            </el-table-column>

            <!-- 折后价 -->
            <el-table-column prop="discountPrice" label="折后价" width="180">
                <template #default="{ row }">
                    <!-- 计算 -->
                    <!-- {{ "￥" }} {{ row.goods.purchasePrice * row.discount }} -->
                    {{ "￥" }} {{ $kt.decimal.mulAll(row.goods.purchasePrice, row.discount) }}
                </template>
            </el-table-column>

            <!-- 金额 -->
            <el-table-column prop="discountPrice" label="金额" width="180">
                <template #default="{ row }">
                    <!-- 计算 -->
                    <!-- {{ "￥" }} {{ row.goods.purchasePrice * row.number }} -->
                    {{ "￥" }} {{ $kt.decimal.mulAll(row.goods.purchasePrice, row.number) }}
                </template>
            </el-table-column>

            <!-- 折后金额 -->
            <el-table-column prop="discountPrice" label="折后金额" width="180">
                <template #default="{ row }">
                    <!-- 计算 -->
                    <!-- {{ "￥" }} {{ row.goods.purchasePrice * row.discount * row.number }} -->
                    {{ "￥" }} {{ $kt.decimal.mulAll(row.goods.purchasePrice, row.discount, row.number) }}
                </template>
            </el-table-column>


        </el-table>


        <div style="text-align: right;" class="amount-box">
            <div class="amount">
                <span class="amount-label">费用金额：</span>
                <span class="amount-value">￥{{ requestParam.feeAmount }}</span>
            </div>

            <div class="amount">
                <span class="amount-label">抹零金额：</span>
                <span class="amount-value">￥{{ requestParam.zeroAmount }}</span>
            </div>

            <div class="amount">
                <span class="amount-label">总金额：</span>
                <span class="amount-value">￥{{ totalAmount }}</span>
            </div>

        </div>

        <template v-slot:footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="revoke()">
                    撤销
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script lang="ts" setup>
import { ref, defineEmits, defineExpose, watch } from 'vue';
let dialogVisible = ref(false);
import $kt from '@/vueKantboot';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { de, fa } from 'element-plus/es/locale';

let requestParam = ref({
    actualAmount: 10,
    gmtCreate: 1699087258000,
    gmtModified: 1699087261000,
    id: 1,
    inList: [
        {
            "gmtCreate": null,
            discountPrice: 4.75,
            discount: 0.95,
            number: 1,
            "gmtModified": null,
            "goods": {
                "barCode": null,
                "brandId": null,
                "children": [],
                "code": null,
                "descriptionJson": null,
                "fileIdOfImgArrStr": "[478236600741893,478236557795333]",
                "gmtCreate": 1698821086621,
                "gmtModified": 1698907615672,
                "id": 477940470317061,
                "minOrder": null,
                "name": "测试1.1",
                "numberStr": null,
                "parent": {
                    "barCode": "1111",
                    "brandId": null,
                    "children": null,
                    "code": null,
                    "descriptionJson": null,
                    "fileIdOfImgArrStr": "[478237718933509]",
                    "gmtCreate": null,
                    "gmtModified": 1698893659698,
                    "id": 2,
                    "minOrder": null,
                    "name": "测试3",
                    "numberStr": "1111",
                    "parent": null,
                    "parentId": null,
                    "price": null,
                    "priority": null,
                    "purchasePrice": null,
                    "retailPrice": null,
                    "selectList": [],
                    "stockWarningLower": null,
                    "stockWarningUpper": null,
                    "type": null,
                    "typeId": null,
                    "unitId": null,
                    "wholesalePrice": null
                },
                "parentId": 2,
                "price": 5.0,
                "priority": null,
                "purchasePrice": 4.0,
                "retailPrice": 5.0,
                "selectList": [],
                "stockWarningLower": null,
                "stockWarningUpper": null,
                "type": null,
                "typeId": null,
                "unitId": null,
                "wholesalePrice": 5.0
            },
            "goodsId": 477940470317061,
            "id": 1,
            "procureOrderId": 1
        },
        {
            "gmtCreate": null,
            discount: 0.95,
            discountPrice: 4.75,
            number: 1,
            "gmtModified": null,
            "goods": {
                "barCode": "1111",
                "brandId": null,
                "children": null,
                "code": null,
                "descriptionJson": null,
                "fileIdOfImgArrStr": "[478237718933509]",
                "gmtCreate": null,
                "gmtModified": 1698893659698,
                "id": 2,
                "minOrder": null,
                "name": "测试3",
                "numberStr": "1111",
                "parent": null,
                "parentId": null,
                "price": null,
                "priority": null,
                "purchasePrice": 0,
                "retailPrice": null,
                "selectList": [],
                "stockWarningLower": null,
                "stockWarningUpper": null,
                "type": null,
                "typeId": null,
                "unitId": null,
                "wholesalePrice": null
            },
            "goodsId": 2,
            "id": 2,
            "procureOrderId": 1
        }
    ],
    name: "1", //采购单
    order: "1", //订单
    remark: "2", //备注
    statusCode: "draft", //状态
    supplier: {
        addressCode: null,
        addressDetail: null,
        bankAccount: null,
        bankName: null,
        discount: 0.95,
        due: 100,
        dueToSupplier: {
            due: 100,
            gmtCreate: 1698978695000,
            gmtModified: null,
            id: 1001,
            supplierId: 1001,
        },
        email: null,
        gmtCreate: 1698977999905,
        gmtModified: 1698977999905,
        id: 1001,
        mobile: null,
        name: "测试01",
        phone: null,
        principalName: "方测试",
        remark: null,
        website: null,
    }, //供应商
    supplierId: 1001,
    userIdOfCreate: 1,
    warehouse: {
        empIdOfManager: null,
        empOfManager: null,
        gmtCreate: 1698739893796,
        gmtModified: 1698739893796,
        id: 477607904501765,
        name: "2号仓库",
        remark: null,
        store: null,
        storeId: null,
    },
    warehouseId: 477607904501765,
    zeroAmount: 10,
    feeAmount: 10,
});


let totalAmount = ref(0);

/**
 * 计算总金额
 */
let getTotalAmount = () => {
    let amount = 0;
    if (!requestParam.value.inList) {
        totalAmount.value = amount;
        return amount;
    }
    for (let i = 0; i < requestParam.value.inList.length; i++) {
        amount = $kt.decimal.add(amount,
            $kt.decimal.mulAll(
                requestParam.value.inList[i].goods.purchasePrice,
                requestParam.value.inList[i].number,
                requestParam.value.inList[i].discount))
    }
    // 加上费用金额
    amount = $kt.decimal.add(amount, requestParam.value.feeAmount);
    // 减去抹零金额
    amount = $kt.decimal.sub(amount, requestParam.value.zeroAmount);
    totalAmount.value = amount;
    return amount;
}

// 监听requestParam变化
watch(() => requestParam, (val) => {
    getTotalAmount();
}, {
    deep: true
})


/**
 * 打开弹窗
 */
let open = (param: any) => {
    if (param) {
        requestParam.value = JSON.parse(JSON.stringify(param));
    }

    dialogVisible.value = true;
}

let emits = defineEmits(['revoke']);

let revoke = () => {
    // dialogVisible.value = false;
    const loading = ElLoading.service({
        lock: true,
        text: '正在操作中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    ElMessageBox.confirm(
        '是否确认撤销？',
        '撤销确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            $kt.request.request({
                url: "/business-goods-web/admin/goodsProcureOrder/revoke",
                method: "post",
                data: requestParam.value,
            })
                .then((res) => {
                    if (res.data.success) {
                        ElMessage({
                            type: 'success',
                            message: res.data.msg
                        });

                        dialogVisible.value = false;
                        loading.close();
                        emits('revoke');
                        return false;
                    }
                    ElMessage({
                        type: 'error',
                        message: res.data.errMsg
                    })
                    loading.close();

                });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消撤销',
            })
            loading.close();
        })

}



// 暴露给父组件的方法
defineExpose({
    open
})


</script>


<style lang="scss" scoped>
.img-uploaded {
    cursor: pointer;
}

.img-uploaded:hover {
    opacity: 0.8;
}


.amount-box {
    margin-top: 20px;
    text-align: right;

    .amount {
        font-weight: bold;
        margin-left: 20px;

        .amount-value {
            color: red;
        }

    }
}


.box-2 {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .dialog-label {
        font-weight: bold;
    }
}
</style>